<template>

  <view class="special main-box feat-grid">

    <view  class="special-list main-bg"
          :style="{'background-image': 'url('+ domainImage(renderData.cover) +')'}"
    >
    </view>
    <view class="special-prompt">
      {{renderData.title}}
    </view>

    <comScriptList :list="renderData.list" :isDetail="true"></comScriptList>

  </view>

</template>
<script setup>
import { onLoad,onReachBottom } from "@dcloudio/uni-app";
import { reactive} from 'vue';
import { mine } from '@/enums/constants';
import { jump,domainImage } from '@/utils/index';
import qs from "qs";
import playApi from "@/apis/play";
import { playStore } from "@/stores";
const store = playStore();
import comScriptList from '@/components/com-script/index'


const renderData = reactive({
  specialId:'',
  cover:'',
  title:'',
  pageIndex:1,
  list:[],
})

const handleGetSpecialList=(type)=>{
  let para = {
    pageSize:mine.pageSize,
    pageIndex:renderData.pageIndex,
    topicId:renderData.specialId
  }
  playApi.getSpecialList(para).then(res=>{
    if(res.code == 'SUCCESS'){
      if(type == 'scroll' && res.data?.length<=0){
        uni.showToast({
          icon:'none',
          title:'暂无数据了!'
        })
      }
      if(res.data?.length>=1){
        renderData.list = renderData.list.concat(res.data);
        renderData.pageIndex++;
      }
    }
  })
}


onReachBottom(()=>{
  if(renderData.list.length<=8){return}
  handleGetSpecialList('scroll');
})
onLoad((options) => {
  renderData.specialId = options?.specialId || "";
  renderData.cover = decodeURIComponent(options?.cover) || "";
  renderData.title = decodeURIComponent(options?.title) || "";
  handleGetSpecialList();
});

</script>

<style lang="scss" scoped>
.special{
  background-color:$main-j;
  &-list{
    width: 100%;
    height: 350rpx;
    border-radius: 30rpx;
    background-color: $main-text-e;
  }
  &-prompt{
    text-align: center;
    margin-bottom: 40rpx;
    @include main-line2;
    @include main-text2;
  }

  &:deep(.script-item){
    @include main-line2;
  }

}
</style>
